<!-- 基于ws的消息list -->
<template>
	<div class="alarmMsg">
		<div class="setBox" v-if="data.showSet">
			<div class="title">报警是否弹窗</div>

			<el-icon class="close" size="20" color="#2f3447" @click="closeSet">
				<CircleClose />
			</el-icon>

			<el-radio-group v-model="data.showDialogVideo" @change="setValue">
				<el-radio :label="1"> 弹出 </el-radio>
				<el-radio :label="0"> 不弹出 </el-radio>
			</el-radio-group>
		</div>

		<div class="msgList" v-if="!data.showSet && data.isDown">
			<div
				class="msgItem"
				v-for="item in smokeStore().alarmMsg.slice(0, 5)"
				:key="item.id"
				:class="item.eventType === 1 ? 'error' : 'warning'"
				@click="alarmMsgClick(item)"
				:title="getAddress(item)"
			>
				<img class="alarmListImg" :src="getFileUrl(item.url)" />
				<div class="adds">
					<span>{{ getAddress(item) }}</span>
				</div>
			</div>
		</div>

		<div class="bootBtn">
			<el-icon class="close" size="18" color="#67c23a" @click="toggleMsg">
				<ArrowDown v-if="data.isDown" />
				<ArrowUp v-else />
			</el-icon>

			<el-icon size="16" color="#b1b3b8" @click="moreBtn">
				<More />
			</el-icon>

			<el-icon size="16" color="#b1b3b8" @click="fetchData">
				<Refresh />
			</el-icon>

			<el-icon class="close" size="16" color="#b1b3b8" @click="data.showSet = !data.showSet">
				<Tools />
			</el-icon>
		</div>
	</div>

	<alarmDialog
		v-if="data.dialogVisible && (smokeStore().autoPopup || data.isClick)"
		:dialog-visible="true"
		:cur-alarm="data.curDevice"
		@close="(data.dialogVisible = false), (data.isClick = false)"
	/>
</template>

<script lang="ts" setup name="alarmList">
import alarmDialog from './alarmDialog.vue';
import { reactive, toRaw, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useSmoke } from '/@/hook/index';
import { getAlarm } from '/@/hook/ws';
import { smokeStore } from '/@/stores/smoke';

import { CircleClose, ArrowDown, ArrowUp, Tools, Refresh, More } from '@element-plus/icons-vue';
const { getAddress, getFileUrl } = useSmoke();

const router = useRouter();

const data = reactive({
	showSet: false,
	showDialogVideo: smokeStore().autoPopup,
	isClick: false, // 是否是点击显示视频
	isDown: true,
	dialogVisible: false,
	curDevice: {},
});


// 判断是否自动弹出
watch(
	() => smokeStore().alarmMsg,
	(newValue) => {
		if (data.showDialogVideo && newValue[0].eventType == 1) {
			alarmMsgClick(newValue[0]);
		}
	},
	{ deep: true }
);

function setValue(value: any) {
	smokeStore().setAutoPopup(value);
	closeSet();
}

function closeSet() {
	data.showSet = false;
}

// 点击按次数统计
function alarmMsgClick(device: any) {
	data.curDevice = device;
	data.dialogVisible = true;
	data.isClick = true;
}

//  查看更多
function moreBtn() {
	let path = router.currentRoute.value.path;
	if (path == '/smoke/alarm/undo') {
		return;
	}
	router.push('/smoke/alarm/undo');
}

function fetchData() {
	getAlarm();
}

function toggleMsg() {
	data.isDown = !data.isDown;
}
</script>
<style lang="scss" scoped>
$width: 240px;

.alarmMsg {
	position: fixed;
	width: $width;
	bottom: 0px;
	right: 5px;
	background-color: rgba($color: #2f3447, $alpha: 0.8);
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	z-index: 99;
}

.msgList {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-self: flex-end;
	padding: 15px 15px 0px 15px;
	box-sizing: border-box;
	overflow: hidden;

	.msgItem {
		cursor: pointer;
		border-radius: 2px;
		padding: 2px;
		font-size: 12px;
		width: 100%;
		box-sizing: border-box;
		margin-bottom: 15px;
		background-color: #fff;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.alarmListImg {
			height: 30px;
		}

		.adds {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			padding-left: 10px;
		}
	}
}

.error {
	// background-color: #fef0f0;
	color: #f56c6c;
}
.warning {
	// background-color: #fdf6ec;
	color: #e6a23c;
}

.setBox {
	width: 100%;
	padding: 20px 20px;
	background-color: #efefef;
	box-sizing: border-box;

	.title {
		color: #f56c6c;
		margin-bottom: 15px;
	}
	.close {
		position: absolute;
		right: 10px;
		top: 10px;
	}
}

.bootBtn {
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	padding: 10px;
	display: flex;
	justify-content: space-around;
	align-items: center;
	background: #2f3447;
}
</style>
